
<template>
	<view>
		<view>
			<view class="warning">
				<view class="point">
					<text>提示：请上传清晰的身份证照片，必须能看清证件号和姓名；仅支持PNG、JPG、JPEG格式，每张大小限制在2M以内</text>
				</view>
			</view>
			
		<view class="message">
		<view class="name">
			<text>姓名</text>
			<input class="inp" v-model="name" placeholder="请输入姓名" :border="border"  />
		</view>
			<view class="id">
				<text >身份证号码</text>
				<input class="inp" v-model="id" placeholder="请输入身份证号码" :border="border"  />
			</view>
		</view>
		
		<view class="front">
			<image src="../../../static/身份证正面.png" mode=""></image>
		</view>
		
		<view class="reverse">
			<image src="../../../static/身份证反面.png" mode=""></image>
		</view>
		
		<view class="btn">
			<u-button type="error">提交</u-button>
		</view>
		</view>
	</view>
</template>

<script>
export default {
   data() {
			return {
				name: '',
				id: '',
			  type: 'text',
				border: true,
			}
		},
	methods:{

	     }
	}
</script>

	
<style class="scss" scoped>
	.warning {
		width: 100%;
		height: 116rpx;
		background-color: #fff8ec;
	}
	
	.warning .point {
		color: #F96302;
		font-size: 26rpx;
		text-align: justify;
		width: 90%;
		margin: 0 5% 0 5%;
		padding-top: 20rpx;
		font-size: 24rpx;
  } 

   image {
	  height: 298rpx;
		width: 492rpx;
  }
	
	.name {
		margin-top: 20rpx;
	}
	
	.message text {
		font-weight: 700;
		margin-left: 40rpx;
	}
	
	.inp {
		width: 90%;
		margin: 3%;
		border: 2rpx solid #999999;
		border-radius: 12rpx;
		height: 70rpx;
		padding-left: 20rpx;
		color: #999999;
	}
	
	.id {
		margin-top: 40rpx;
	}
	
	.front {
		width: 70%;
		margin: 15%;
	}
	
	.reverse {
	width: 70%;
	margin: 15%;
	}
	
	.btn {
		width: 90%;
		margin-left: 5%;
	}
</style>
